<template>
  <div>
    <!-- 头部搜索部分 -->
    <el-row style="paddingBottom: 0">
      <el-col>
        <dynForm :info-form="search" :search-tags="searchTags.slice(0,4)" :select-list="selectList">
          <el-form-item v-show="!show">
            <el-button type="primary" icon="el-icon-search" @click="doSearch">{{ $t('search') }}</el-button>
          </el-form-item>
          <el-form-item v-show="!show">
            <span class="el-dropdown-link" @click="show=!show">
              {{ $t('expand') }}
              <i class="el-icon-arrow-down el-icon--right"/>
            </span>
          </el-form-item>
        </dynform>
        <el-collapse-transition>
          <div v-show="show">
            <dynForm :info-form="search" :search-tags="searchTags.slice(4)" :select-list="selectList">
              <el-form-item v-show="show">
                <el-button type="primary" icon="el-icon-search" @click="doSearch">{{ $t('search') }}</el-button>
              </el-form-item>
              <el-form-item v-show="show">
                <span v-show="show" class="el-dropdown-link" @click="show=!show">
                  {{ $t('retract') }}
                  <i class="el-icon-arrow-up el-icon--right"/>
                </span>
              </el-form-item>
            </dynform>
          </div>
        </el-collapse-transition>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crudJob from '@/api/equipment/eqpbase'
import selectJob from '@/api/system/attributes'
import { getAllUsers } from '@/api/system/user'
export default {
  data() {
    return {
      searchTags: [
        // { label: this.$t('eqpType'), prop: 'eqpType', tag: 'DynSelect' },
        // { label: this.$t('eqpModel'), prop: 'eqpModel', tag: 'DynSelect' },
        { label: this.$t('eqpName'), prop: 'eqpName', tag: 'DynInput' },
        { label: this.$t('eqpemGroup'), prop: 'emGroup', tag: 'DynSelect' },
        { label: this.$t('eqpassetAllocate'), prop: 'assetAllocate', tag: 'DynSelect' },
        { label: this.$t('eqpsystemType'), prop: 'systemType', tag: 'DynSelect' },
        { label: this.$t('eqplocation'), prop: 'location', tag: 'DynSelect' },
        { label: this.$t('firstOwenrId'), prop: 'owenrId', tag: 'DynSelect' }
      ],
      selectList: {},
      show: false,
      search: {}
    }
  },
  created() {
    crudJob
      .eqptypelist()
      .then(res => {
        this.$set(this.selectList, 'eqpType', res.data)
      })
    crudJob
      .eqpmodellist('')
      .then(res => {
        this.$set(this.selectList, 'eqpModel', res.data)
      })
    selectJob
      .selectitemlist({ name: 'EQP_EMGroupList' })
      .then(res => {
        this.$set(this.selectList, 'emGroup', res.data)
      })
    selectJob
      .selectitemlist({ name: 'EQP_AssetalList' })
      .then(res => {
        this.$set(this.selectList, 'assetAllocate', res.data)
      })
    selectJob
      .selectitemlist({ name: 'EQP_SystemtypeList' })
      .then(res => {
        this.$set(this.selectList, 'systemType', res.data)
      })
    selectJob
      .selectitemlist({ name: 'EQP_LocationList' })
      .then(res => {
        this.$set(this.selectList, 'location', res.data)
      })
    getAllUsers()
      .then(res => {
        this.$set(this.selectList, 'owenrId', res.data)
      })
  },
  methods: {
    doSearch() {
      this.$emit('doSearch', this.search)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
.el-row {
  min-height: 46px;
  padding: 10px;
  background-color: #fff;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-collapse-transition {
  position: relative;
  .el-date-picker {
    position: absolute;
    top: 50px;
  }
}
.el-form-item {
  margin-bottom: 0;
}
</style>
